<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>数据统计</title>
	<!-- Tell the browser to be responsive to screen width -->
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<!-- Bootstrap 3.3.7 -->
	<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
	<!-- Font Awesome -->
	<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
	<!-- Ionicons -->
	<link rel="stylesheet" href="../bower_components/Ionicons/css/ionicons.min.css">
	<!-- Theme style -->
	<link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
	<!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
	<link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
	<!-- Morris chart -->
	<link rel="stylesheet" href="../bower_components/morris.js/morris.css">
	<!-- jvectormap -->
	<link rel="stylesheet" href="../bower_components/jvectormap/jquery-jvectormap.css">
	<!-- Date Picker -->
	<link rel="stylesheet" href="../bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
	<!-- Daterange picker -->
	<link rel="stylesheet" href="../bower_components/bootstrap-daterangepicker/daterangepicker.css">
	<!-- bootstrap wysihtml5 - text editor -->
	<link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

	<!-- Google Font -->
	<link rel="stylesheet"
		  href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
	<header class="main-header">
		<!-- Logo -->
		<a href="#" class="logo">
			<span class="logo-mini"><b>A</b>P</span>
			<span class="logo-lg"><b>Admin</b>Page</span>
		</a>
		<nav class="navbar navbar-static-top">
			<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</a>

			<div class="navbar-custom-menu">
				<ul class="nav navbar-nav">
					<!-- Notifications: style can be found in dropdown.less -->
					<li class="dropdown notifications-menu">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-bell-o"></i>
							<span class="label label-warning" id="warning"
								  th:text="${session.warningMerches.size()}"></span>
						</a>
						<ul class="dropdown-menu ">
							<li class="header" th:text="${session.warningMerches.size()}+'条商品库存数量达到警戒线'"></li>
							<li>
								<!-- inner menu: contains the actual data -->
								<ul class="menu" th:each="m:${session.warningMerches}">
									<li>
										<a href="#">
											<i class="fa fa-warning text-yellow"></i>
											<span th:text="${m.getMerchName()}"></span>
										</a>
									</li>
								</ul>
							</li>
							<li class="footer"><a href="#">View all</a></li>
						</ul>
					</li>

					<!-- User Account: style can be found in dropdown.less -->
					<li class="dropdown user user-menu">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<span class="hidden-xs">Admin</span>
						</a>
					</li>
				</ul>
			</div>
		</nav>
	</header>
	<!-- Left side column. contains the logo and sidebar -->
	<aside class="main-sidebar">
		<!-- sidebar: style can be found in sidebar.less -->
		<section class="sidebar">
			<!-- sidebar menu: : style can be found in sidebar.less -->
			<ul class="sidebar-menu" data-widget="tree">
				<li class="header">MAIN NAVIGATION</li>
				<li>
					<a href="/">
						<i class="fa fa-pie-chart"></i> <span>数据统计</span>
					</a>
				</li>
				<li class="treeview">
					<a href="#">
						<i class="glyphicon glyphicon-gift"></i> <span>商品管理</span>
						<span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
					</a>
					<ul class="treeview-menu">
						<li><a href="/merch/listMerch"><i class="fa fa-circle-o"></i>商品列表</a></li>
						<li><a href="/merch/addMerch"><i class="fa fa-circle-o"></i>添加商品</a></li>
					</ul>
				</li>

				<li class="treeview">
					<a href="#">
						<i class="glyphicon glyphicon-send"></i>
						<span>供应商管理</span>
						<span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
					</a>
					<ul class="treeview-menu">
						<li><a href="/provider/list"><i class="fa fa-circle-o"></i>供应商列表</a></li>
						<li><a href="/provider/addProvider"><i class="fa fa-circle-o"></i>添加供应商</a></li>
					</ul>
				</li>
				<li class="treeview">
					<a href="#">
						<i class="fa fa-laptop"></i>
						<span>入库管理</span>
						<span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
					</a>
					<ul class="treeview-menu">
						<li><a href="/instock/list"><i class="fa fa-circle-o"></i>入库记录</a></li>
						<li><a href="/instock/add"><i class="fa fa-circle-o"></i>添加记录</a></li>
					</ul>
				</li>
				<li class="treeview active">
					<a href="#">
						<i class="glyphicon glyphicon-shopping-cart"></i> <span>销售管理</span>
						<span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
					</a>
					<ul class="treeview-menu">
						<li class="active"><a href="/sale/getAll"><i class="fa fa-circle-o"></i>订单列表</a></li>
						<li><a href="/sale/adds"><i class="fa fa-circle-o"></i>添加订单</a></li>
					</ul>
				</li>
				<li class="treeview">
					<a href="#">
						<i class="glyphicon glyphicon-user"></i> <span>会员管理</span>
						<span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
					</a>
					<ul class="treeview-menu">
						<li><a href="/member/list"><i class="fa fa-circle-o"></i>会员列表</a></li>
						<li><a href="/member/add"><i class="fa fa-circle-o"></i>添加会员</a></li>
					</ul>
				</li>
				<li class="treeview">
					<a href="#">
						<i class="fa fa-calendar"></i> <span>员工管理</span>
						<span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
					</a>
					<ul class="treeview-menu">
						<li><a href="/staff/listStaff"><i class="fa fa-circle-o"></i>员工列表</a></li>
						<li><a href="/staff/addStaff"><i class="fa fa-circle-o"></i>添加员工</a></li>
					</ul>
				</li>
			</ul>
		</section>
		<!-- /.sidebar -->
	</aside>

	<!-- Content Wrapper. Contains page content -->
	<div class="content-wrapper">
		<!-- Content Header (Page header) -->
		<section class="content-header">
			<h1>
				订单列表
			</h1>

		</section>

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-xs-12">
					<div class="box">
						<div class="box-header">
<!--							<h3 class="box-title">Data Table With Full Features</h3>-->
						</div>
						<!-- /.box-header -->
						<div class="box-body">
							<table id="example1" class="table table-bordered table-striped">
								<thead>
								<tr>
									<th>订单ID</th>
									<th>客户ID</th>
									<th>客户名</th>
									<th>商品ID</th>
									<th>商品名</th>
									<th>商品数量</th>
									<th>总价</th>
									<th>创建时间</th>
									<th>修改时间</th>
									<td>操作</td>
								</tr>
								</thead>
								<tbody>
								<tr th:each="s:${sales}">
									<td th:text="${s.getSaleId()}"></td>
									<td th:text="${s.getMember().getMemberId()}"></td>
									<td th:text="${s.getMember().getMemberName()}"></td>
									<td th:text="${s.getMerch().getMerchId()}"></td>
									<td th:text="${s.getMerch().getMerchName()}"></td>
									<td th:text="${s.getMerchNumber()}"></td>
									<td th:text="${s.getSalePrice()}"></td>
									<td th:text="${s.getCreateTime()}"></td>
									<td th:text="${s.getUpdateTime()}"></td>
									<th>
										<div class="btn-group" role="group" aria-label="...">
											<button name="edit" class="glyphicon glyphicon-pencil"></button>
											<button name="delete" data-toggle="modal"
													data-target="#myModal"
													class="glyphicon glyphicon-remove"></button>
										</div>
									</th>
								</tr>
								</tbody>
								<tfoot>
								<tr>
									<th>订单ID</th>
									<th>客户ID</th>
									<th>客户名</th>
									<th>商品ID</th>
									<th>商品名</th>
									<th>商品数量</th>
									<th>总价</th>
									<th>创建时间</th>
									<th>修改时间</th>
									<td>操作</td>
								</tr>
								</tfoot>
							</table>
						</div>
						<!-- /.box-body -->
					</div>
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</section>
		<!-- /.content -->
	</div>
	<!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script
		src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script
		src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script
		src="../../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- /.box -->
<div class="mask" style=""></div>
<div class="window" id="center">
	<form role="form" id="updateForm">
		<div class="box-body">
			<div class="form-group">
				<label for="saleId">订单ID</label> <input name="saleId"
														readonly="readonly" type="text" class="form-control" id="saleId">
			</div>
			<div class="form-group">
				<label for="userId">客户ID</label> <input name="memberId"
														readonly="readonly" type="text" class="form-control" id="userId">
			</div>
			<div class="form-group">
				<label for="merchId">商品ID</label> <input name="merchId"
														 readonly="readonly" type="text" class="form-control" id="merchId">
			</div>

			<div class="form-group">
				<label for="num">商品数量</label> <input
					name="merchNumber" type="text" class="form-control" id="num">
			</div>
			<div class="form-group">
				<label for="price">总价</label> <input
					name="salePrice" type="text" class="form-control" id="price">
			</div>
		</div>
		<!-- /.box-body -->

		<div class="box-footer">
			<button id="updateSale" class="btn btn-primary">Submit</button>
		</div>
	</form>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	 aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">警告</h4>
			</div>
			<div class="modal-body">确认删除？？</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" id="saleDelete" class="btn btn-primary">删除</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
</div>
<style>
	.flex-container {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}

	.window {
		width: 70%;
		padding-bottom: 20px;
		background-color: #fff;
		position: fixed;
		display: none;
		margin-bottom: 100px;
		border: 1px solid #E0DFDF;
	}

	.mask {
		position: absolute;
		top: 0;
		display: none;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>
<!-- page script -->
<script>
	$(window).ready(function() {
	});
	//关闭窗口的方法
	function closeWindow() {
		$(".mask").click(function() {
			$('.window').hide("slow");
			$('.mask').css('display', 'none');
		});
	}
	//定义弹出居中窗口的方法
	function popCenterWindow() {
		//设定窗口的位置
		$("#center").css("top", 100).css("left", 340).slideToggle("fast");
		closeWindow();
	}
	$(document).ready(function() {
		var table = $('#example1').DataTable({
			'paging' : true,
			'lengthChange' : true,
			'searching' : true,
			'ordering' : true,
			'info' : true,
			'autoWidth' : true
		});

		table.on('click', "button[name='edit']", function() {
			var row = table.row($(this).parents('tr'));
			var data = row.data();
			$('.mask').css('display', 'block');
			$('.mask').css('width', $(window).width())
			$('.mask').css('height', $(document).height())
			popCenterWindow();
			$('#saleId').val(data[0]);
			$('#userId').val(data[1]);
			$('#merchId').val(data[3]);
			$('#num').val(data[5]);
			$('#price').val(data[6]);
		});

		$("#updateSale").click(function() {
			var updateData = $("#updateForm").serializeArray();
			var data = "{";
			for (var i = 0; i < updateData.length; i++) {
				var name = updateData[i].name;
				var value = updateData[i].value;
				data = data + "\"" + name + "\":\"" + value.trim() + "\",";
			}
			data = data.substring(0, data.length - 1);
			data = data + "}";
			$.ajax({
				url : "/sale/change",
				contentType : 'application/json',
				dataType : "json",
				type : "post",
				data : data,
				success : function(data) {
					alert(data.msg);
					$(".mask").click(function() {
						$('.window').hide("slow");
						$('.mask').css('display', 'none');
					});
					window.location.reload();
				},
				error : function(data) {
					alert("success");
				}
			});
		})
		table.on('click', "button[name='delete']", function() {
			var row = table.row($(this).parents('tr'));
			var data = row.data();
			window.obj = new Object();
			obj.saleId = data[0];
			obj.memberId = data[1];
			obj.merchId = data[3];
		});
		$('#saleDelete').click(function() {
			var data=JSON.stringify(window.obj);
			console.log(data);
			$.ajax({
				url : "/sale/deleteOne",
				contentType : 'application/json',
				dataType : "json",
				type : "post",
				data : data,
				success : function(d) {
					alert(d.msg);
					window.location.reload();
				},
				error : function(data) {
					alert("error");
					//window.location.reload();
				}
			});
			$('#myModal').modal('hide');
		})
	});
</script>

</body>

</html>